<template>
    <div class="wBox">
        <div class="downVideoBox">
            <h2>BILIBILI 番剧下载</h2>
            <!-- <span style="color:hotpink;font-size:14px">本软件使用B站登录的cookie认证身份，不否认同一时间大量下载会被封禁</span> -->
            <div class="downBox">
                <input class="input" type="text" v-model="input" placeholder="请输入番剧链接(带有ss的链接)">
                <button class="but blueB" @click="getFJ()">获取</button>
            </div>
            <h5>搜索的番剧以及番剧索引链接样式:https://XXXX/play/<span style="color:hotpink;">ss1234</span>?xxx</h5>
            
            <div class="seleBoxA" >
                <div class="seleBox" v-for="(i,index) in vidList" :key="index" @click="sele(i,index)" :class="{actP :i.ins == true}">
                    {{i.data.title}}&nbsp;&nbsp;{{i.data.long_title}}
                </div>
            </div>
            <button class="but1 blueB ac" style="margin:10px 0;" @click="DownXH" v-show="vidList.length !=0">下载番剧</button>
        </div>
        <div class="user-link">
            <div style="display:flex;flex-direction: column;color:#fff;">
                <span class="spanO">{{nowD}}</span>
                <span>{{ts}}</span>
                <span style="color:red;" v-show="Herr">你的SESSDATA认证已过期，请重新设置</span>
            </div>
            <div style="display:flex;color:#fff;">
                <!-- <div class="user-img">
                    <img src="../../public/my.jpg" alt="" height="40" width="40" draggable="false">
                </div> -->
                <!-- <div style="display:flex;flex-direction: column;">
                    
                </div> -->
                <button class="but1 blueB" style="min-width:95px" @click="openF">
                    <span>打开文件夹</span>
                </button>
                <button class="but1 blueB" @click="setting = !setting" style="min-width:110px">
                    <span>设置视频参数</span>
                </button>
                <button class="but1 blueB" @click="QRB" :class="[{blueB:SESSDATA == ''},{blueP: SESSDATA != ''}]" style="min-width:148px">
                    <span v-show="SESSDATA == ''">SESSDATA：未设置</span>
                    <span v-show="SESSDATA != ''">SESSDATA：已设置</span>
                </button>
            </div>
            
            
        </div>
        <!-- <div class="loginQR" v-show="loginQRT">
            <svg @click="loginC" xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="closeBox" viewBox="0 0 16 16">
                <path fill="white" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
            </svg>
            <div v-html="loginQR" class="svg"></div>
            <span style="margin-top:10px;color:#fff;text-align: center;">请扫描二维码登录</span>
        </div> -->
        <div class="loginQR"  v-show="loginQRT">
            <svg @click="loginQRT = !loginQRT" xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="closeBox" viewBox="0 0 16 16">
                <path fill="white" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
            </svg>
            <textarea v-model="SESSDATA" class="inputs" name="" id="" cols="30" rows="8" placeholder="输入你的SESSDATA,格式为SESSDATA=XXXXX（XXXXX为你的SESSDATA值）"></textarea>
            <span>打开B站网页版登陆后f12打开控制台，选择应用程序选项卡，cookie选项里的SESSDATA</span>
            <span>下载需要大会员的视频而你的账号SESSDATA没有大会员权限则会报SESSDATA过期，未登录只能下载360p，登录一般能下载1080p，大会员无限制默认最高画质</span>
            <button class="but2 blueB" @click="QRB">确认</button>
        </div>
        <div class="loginQRs"  v-show="setting">
            <svg @click="setting = !setting" xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="closeBox" viewBox="0 0 16 16">
                <path fill="white" d="M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z"/>
            </svg>
            <div style="display:flex;margin-bottom:10px">
                <span style="line-height:30px;margin-right:10px">输出视频格式</span>
                <Select v-model="OUTG" style="width:150px;height:30px;background-color:#3a404a;line-height:30px;">
                    <Option v-for="item in OUTL" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
            </div>
            <div style="display:flex;margin-bottom:10px">
                <span style="line-height:30px;margin-right:10px">转换线程数量</span>
                <Select v-model="OUTXC" style="width:150px;height:30px;background-color:#3a404a;line-height:30px;">
                    <Option v-for="item in OUTXCL" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
            </div>
            <button class="but2 blueB" @click="QRBS">确认</button>
        </div>
        <!--  -->
    </div>
</template>
<script setup>
import { onMounted,ref } from "vue";
const request = require('request')
const {resolve} = require('path')
const fs = require('fs');
const { exec } = require("child_process");
import { trace } from "console";
const { shell } = require('electron')
// import { fastDown } from "fast-down";
import { Select,Option } from "view-ui-plus";
import { storeToRefs } from 'pinia'
import useNoiseStatistics from '../stores/index';
//获取pinia
const counterStore = useNoiseStatistics()
const { SDPath,sessdata,XC,savePath,outGS } = storeToRefs(counterStore)

//输入框
const input = ref('')
//番剧列表
const vidList = ref([])
const downMsg = []
//选中的列表
const seleList = ref([])
//登录二维码
const loginQR = ref(null)
//窗口状态
const loginQRT = ref(false)
const setting = ref(false)
//定时器
const LXTime =ref(null)
const downIngDSQ = ref(null)
//得到用户token
const userToken = ref('')
//用户session
const SESSDATA = ref(sessdata)
//当前下载
const nowD = ref('')
//单线程下载
const isT = ref(false)
//下载计数
const isV = ref(false)
const isA = ref(false)
//

const ts = ref('')

//zz
const downsetTime =ref(null)
const downNum =ref(0)
//
const OUTG = ref(outGS)
const OUTL = ref([
    {value: 'mp4',label: 'MP4'},
    {value: 'avi',label: 'AVI'},
    {value: 'mkv',label: 'MKV'},
    {value: 'mov',label: 'MOV'},
    {value: 'flv',label: 'FLV'},
    {value: 'webm',label: 'WebM'},
])
//线程数量
const OUTXC = ref(XC)        
const OUTXCL = ref([
    {value: '1',label: '1'},
    {value: '2',label: '2'},
    {value: '3',label: '3'},
    {value: '4',label: '4'},
    {value: '5',label: '5'},
    {value: '6',label: '6'},
])
//保存位置
const save = ref(savePath)
//输出格式
const outGSW = ref(outGS)
//认证过期tip
const Herr = ref(false)

onMounted(()=>{
})
//打开文件夹
function openF() {
    shell.openPath(counterStore.SDPath+'\\LiveImg')
}
//
function QRB() {
    loginQRT.value = !loginQRT.value
    counterStore.sessdata = SESSDATA.value
}
function QRBS() {
    setting.value = !setting.value
    counterStore.outGS = OUTG.value
    counterStore.XC = OUTXC.value
}
//删除文件
function delF(path) {
    fs.unlink(counterStore.SDPath+'\\LiveImg\\'+path,(err)=>{
        if (err) {
            console.log(err)
        }else{
            console.log('删除成功'+path)
        }
    })
}
//测试转换
/**
 * 输入视频名，输入音频名，线程数量，输出质量，输出文件名字，输出格式
 */
function ZH(index,vName,aName,XC,ZL,outName,HZM) {
    isA.value = false
    isV.value = false
    const tt = setInterval(() => {
        nowD.value = '第'+index+'话，'+name+'下载完成，正在合并视频'
    }, 250);
    //开发环境去掉resource
    exec('cd resources & cd LiveImg & ffmpeg -i "'+vName+'" -i "'+aName+'" -threads '+XC+' -preset veryfast -crf '+ZL+' "'+outName+'.'+HZM+'" & exit /b', (error, stdout, stderr) => {
    // exec('cd resources && cd LiveImg && echo %cd%', (error, stdout, stderr) => {
    if (!error) {
      // 成功
    //   console.log(stdout)
    nowD.value = '合并视频：'+outName+'完成'
    downNum.value = downNum.value+1
    delF(vName)
    delF(aName)
    clearInterval(tt)
    window.clearInterval(tt)
    isT.value == false
    console.log('合成完成',isT.value)
    } else {
      // 失败
      fs.writeFile(counterStore.SDPath+'\\LiveImg\\outError.txt',String(error),(err)=>{
        // console.log(error)
        nowD.value = '合并失败错误已输出到错误日志'
      })
      
    }})
}
//关闭登录二维码窗口
// function loginC() {
//     loginQRT.value = !loginQRT.value
//     QR()
// }

/**
 * 选择下载的视频
 * par: parms  选中的视频单集数据
 *      index  数组下标
 */
function sele(parms,indexs) {
    let data = JSON.parse(JSON.stringify(parms)).data
    if (seleList.value.length == 0) {
        seleList.value.push(data.id)
        vidList.value.splice(indexs,1,{data:parms.data,ins:true})
    }else{
        let ele = JSON.parse(JSON.stringify(seleList.value))
        let ind = false
        for (let index = 0; index < ele.length; index++) {
            const element = ele[index];
            if (element == data.id) {
                seleList.value.splice(index,1)
                vidList.value.splice(indexs,1,{data:parms.data,ins:false})
                ind = false
                break
            }else{
                ind = true
            }
        }
        if (ind) {
            seleList.value.push(data.id)
            vidList.value.splice(indexs,1,{data:parms.data,ins:true})
            ind = false
        }
    }
    // console.log(parms,data)
    // console.log(downMsg[indexs])
}
function DownXH() {
    console.log('is',isT.value)
    if (isT.value == false) {
        // console.log('判断里',isT.value)
        isT.value = true
        let nn = 0
        downNum.value = 0
        console.log('isl',isT.value)
        console.log('jsq',downsetTime.value)
        downsetTime.value = setInterval(() => {
            if (nn >= JSON.parse(JSON.stringify(vidList.value)).length) {
                nowD.value = '所有任务下载完成'
                isT.value = false
                downNum.value = 0
                clearInterval(downsetTime.value)
                // console.log('所有任务完成',isT.value)
            }
            
            try{
                console.log(downNum.value,JSON.parse(JSON.stringify(vidList.value)).length)
                if (downNum.value < JSON.parse(JSON.stringify(vidList.value)).length) {
                    let dataOne = JSON.parse(JSON.stringify(vidList.value))[nn]
                    // if(dataOne.ins == true && downNum.value == nn){
                        console.log('LW',dataOne)
                        if (dataOne != undefined) {
                            if (dataOne.ins== true) {
                                console.log('W',downNum.value,nn)
                                if (downNum.value == nn) {
                                    console.log('L',downNum.value,nn)
                                    nn = nn + 1
                                    var avid = dataOne.data.aid
                                    var cid = dataOne.data.cid
                                    var epid = dataOne.data.share_url.split('ep')[1].split('?')[0]

                                    setTimeout(() => {
                                        console.log('发请求去',downNum.value,nn)
                                        request({
                                        url: 'https://api.bilibili.com/pgc/player/web/v2/playurl?support_multi_audio=true&avid='+avid+'&cid='+cid+'&qn=112&fnver=0&fnval=4048&fourk=1&gaia_source=&from_client=BROWSER&ep_id='+epid+'&session=',
                                        // encoding: null,
                                        method: "GET",
                                        headers: {
                                            'Cookie':SESSDATA.value,
                                            'Referer':dataOne.data.share_url,
                                            'Origin':'https://www.bilibili.com',
                                            'User-Agent':'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36 Edg/117.0.2045.60'
                                        },
                                        }, function(error, response, body) {
                                        if (!error && response.statusCode == 200) {
                                            // console.log(JSON.parse(body))
                                            // downMsg.push(JSON.parse(body))
                                            if (JSON.parse(body).result.video_info == undefined || JSON.parse(body).result.video_info == undefined) {
                                                Herr.value = true
                                                setTimeout(() => {
                                                    Herr.value = false
                                                }, 6000);
                                                isT.value = false
                                            }else{
                                                let video = JSON.parse(body).result.video_info.dash.video[0].baseUrl
                                                let audio = JSON.parse(body).result.video_info.dash.audio[0].baseUrl
                                                let size = JSON.parse(body).result.video_info.dash.video[0].size
                                                // let nowep = JSON.parse(body).result.view_info
                                                // console.log(nowep)
                                                downLoad(video,audio,dataOne.data.long_title,dataOne.data.title,dataOne.data.share_url,size)
                                            }
                                            
                                        }
                                        })
                                    }, 250);
                                }
                                
                            }else{
                                downNum.value = downNum.value+1
                                nn = nn + 1
                            }
                        }
                        // console.log('pd',dataOne.ins,downNum.value,nn)
                        
                        

                        // console.log(element,avid,cid,epid)
                        
                    // }
                }
            }catch(err){

            }
        }, 250);
    }else{
        ts.value = '当前任务正在进行，请等待任务完成'
    }
    
    // if (isT.value == false) {
    //     isT.value = true
    //     JSON.parse(JSON.stringify(vidList.value)).forEach(element => {
    //         if(element.ins == true){
    //             var avid = element.data.aid
    //             var cid = element.data.cid
    //             var epid = element.data.share_url.split('ep')[1].split('?')[0]

    //             // console.log(element,avid,cid,epid)
    //             setTimeout(() => {
    //                 request({
    //                 url: 'https://api.bilibili.com/pgc/player/web/v2/playurl?support_multi_audio=true&avid='+avid+'&cid='+cid+'&qn=112&fnver=0&fnval=4048&fourk=1&gaia_source=&from_client=BROWSER&ep_id='+epid+'&session=',
    //                 // encoding: null,
    //                 method: "GET",
    //                 headers: {
    //                     'Cookie':SESSDATA.value,
    //                     'Referer':element.data.share_url,
    //                     'Origin':'https://www.bilibili.com',
    //                     'User-Agent':'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36 Edg/117.0.2045.60'
    //                 },
    //                 }, function(error, response, body) {
    //                 if (!error && response.statusCode == 200) {
    //                     console.log(JSON.parse(body))
    //                     // downMsg.push(JSON.parse(body))
    //                     let video = JSON.parse(body).result.video_info.dash.video[0].baseUrl
    //                     let audio = JSON.parse(body).result.video_info.dash.audio[0].baseUrl
    //                     // // let nowep = JSON.parse(body).result.view_info.report.ep_id
    //                     downLoad(video,audio,element.data.long_title,element.data.title,element.data.share_url)
    //                 }
    //                 })
    //             }, 250);
    //         }
    //     });
    //     nowD.value = '当前下载完成'
    //     isT.value = false
    // }else{
    //     ts.value = '当前任务正在进行，请等待任务完成'
    // }

}
//视频音频请求
function downLoad(video,audio,name,index,refurl,filesize){
    
    // isT.value = true
    let path = resolve('./')
    var cxsize

    nowD.value = '当前正在下载'+index+'话，'+name+''
    const file = fs.createWriteStream(counterStore.SDPath+'\\LiveImg\\第'+index+'话'+name.trim().split('/')[0]+'_v.m4s');
    downIngDSQ.value = setInterval(() => {
        fs.stat(counterStore.SDPath+'\\LiveImg\\第'+index+'话'+name.trim().split('/')[0]+'_v.m4s', (err, stats) => {
            if (err) {
                console.log(`File doesn't exist.`);
            } else {
                cxsize = stats.size
                nowD.value = ''+index+'话，'+name+'下载进度:'+Number(stats.size/Number(filesize).toFixed(1))*100+'%'
                if (isA.value && isV.value) {
                        nowD.value = '第'+index+'话，'+name+'下载完成，正在合并视频'
                    }
                // console.log('下载进度:'+Math.trunc(stats.size/Number(filesize))+'%')
            }
        });
        if(Number(filesize) == cxsize){
            clearInterval(downIngDSQ.value)
        }
    }, 100);

    const files = fs.createWriteStream(counterStore.SDPath+'\\LiveImg\\第'+index+'话'+name.trim().split('/')[0]+'_a.m4s');

    try {
        request({
            url: video,
            // encoding: null,
            method: "GET",
            headers: {
                'referer': refurl,
                "origin": "https://www.bilibili.com",
                'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Safari/537.36 Edg/97.0.1072.55',
                // "content-type": "application/json"
            },
            }, function(error, response, body) {
                console.log(error)
            // if (!error && response.statusCode == 200) {
                
                
            // }
            }).pipe(file).on('close',function(){
                console.log('第'+index+'话，'+name+'视频完成')
                isV.value = true
        })
    } catch (error) {
        
    }

    LXTime.value = setInterval(() => {
        if (isA.value && isV.value) {
            nowD.value = '第'+index+'话，'+name+'下载完成，正在合并视频'
            clearInterval(LXTime.value)
            ZH(index,'第'+index+'话'+name.trim().split('/')[0]+'_v.m4s','第'+index+'话'+name.trim().split('/')[0]+'_a.m4s',OUTXC.value,'1','第'+index+'话'+name.trim().split('/')[0],''+outGSW.value)
        }
    }, 250);

    request({
        url: audio,
        // encoding: null,
        method: "GET",
        headers: {
            'referer': refurl,
            "origin": "https://www.bilibili.com",
            'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/97.0.4692.71 Safari/537.36 Edg/97.0.1072.55',
            // "content-type": "application/json"
        },
        }, function(error, response, body) {
            console.log(error)
        // if (!error && response.statusCode == 200) {
        // }
        }).pipe(files).on('close',function(){
            console.log('第'+index+'话，'+name+'音频完成')
            isA.value = true
    })
}

function getFJ(){
    let ssurl = input.value.split('ss')
    // console.log(ssurl[1])
    if(ssurl[1] != undefined){
        let ss_id = ssurl[1].split('?')[0]
        console.log(ss_id)
        request({
        url: 'https://api.bilibili.com/pgc/web/season/section?season_id='+ss_id+'',
        // encoding: null,
        method: "GET",
        headers: {
            'referer':'https://www.bilibili.com/bangumi/play/ep777176',
            "origin":"https://www.bilibili.com",
            "Cookie":'SESSDATA=89bb3e3a%2C1712780170%2C154e7%2Aa2CjDoV-oUVBi9Jr2COXDJByghSt9YLXAOKc90wqKqg2LtAMS70txTwkr6PUFzneEOzJkSVkJiUXAwR3VxelIxNDVKc2RMWVd1WUtSN0hseFJjSE1tVVNiQXRmYkdidEJ6Q0VhZ3ZiUWlSdzdRQVREa0xTWDFlZHhBSTZka2VNYkVkNHJBeGVZNkFBIIEC'
        },
        }, function(error, response, body) {
        if (!error && response.statusCode == 200) {
            vidList.value = []
            JSON.parse(body).result.main_section.episodes.forEach(element => {
                vidList.value.push({data:element,isn:false})
            })
            // console.log('data:::',reData)
        }
        })
    }else{
        nowD.value = '你的链接格式错误,请重新输入'
    }

}
/**
 * b站登录二维码
 * 1.-4，此状态为二维码未扫描
    2.-5，此状态为二维码已扫描，但是未确认
    3.字符串格式，此状态为二维码已扫描，并且已确认，为登录状态
    4.-2，此状态为二维码已过期
 */
// function QR() {
//     request({
//     url: 'https://passport.bilibili.com/qrcode/getLoginUrl',
//     // encoding: null,
//     method: "GET"
//     }, function(error, response, body) {
//     if (!error && response.statusCode == 200) {
//         // console.log(JSON.parse(body).data.url)https://passport.bilibili.com/qrcode/getLoginInfo
//         loginQR.value = rendererLine(encodeData({text:JSON.parse(body).data.url,posType:1,correctLevel:2}))
//         LXTime.value = setInterval(() => {
//             request({
//                 url: 'https://passport.bilibili.com/qrcode/getLoginInfo',
//                 // encoding: null,
//                 method: "POST",
//                 qs:{oauthKey:JSON.parse(body).data.oauthKey}
//                 }, function(error, response, body) {
//                 if (!error && response.statusCode == 200) {
//                     console.log(JSON.parse(body).data,JSON.parse(body))
//                     if (JSON.parse(body).data == -2) {
                        
//                         clearInterval(LXTime.value)
//                         window.clearInterval(LXTime.value)
//                         // console.log(LXTime.value)
//                     }else if (JSON.parse(body).data == -2 && JSON.parse(body).data == -4 && JSON.parse(body).data == -5) {
//                         userToken.value = JSON.parse(body).data.refresh_token
                        
//                     }
//                 }
//                 })
//         }, 5000);
//     }
//     })
// }
</script>
<style scoped>
.spanO{
    width: 320px;
    line-clamp: 2;
    -webkit-line-clamp: 2;
	overflow: hidden; /*超出部分隐藏*/
	text-overflow: ellipsis; /*超出部分省略号表示*/
	white-space: nowrap; /*强制单行显示*/
	display: block; /*转换为行内块元素*/
}
.ac:hover{
    background-color: hotpink;
}
.closeBox{
    position: absolute;
    right: 5px;
    top: 5px;
}
.loginQRs>.svg{
    width:200px;
    height: 200px;
}
.loginQRs{
    display:flex;
    flex-direction: column;
    position: fixed;
    padding: 30px 40px 10px 40px;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
    left: 32%;
    top: 35%;
    background-color: #454e5d;
    box-shadow: 0px 0px 8px 0px var(--def-boxshow-color);
    background-color: var(--def-box-color);
    backdrop-filter: blur(var(--def-filler));
    border-radius: 4px;
    color: #fff;
}
.loginQR>.svg{
    width:200px;
    height: 200px;
}
.loginQR{
    max-width: 500px;
    display:flex;
    flex-direction: column;
    position: fixed;
    padding: 30px 40px 10px 40px;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
    left: 15%;
    top: 5%;
    background-color: #454e5d;
    box-shadow: 0px 0px 8px 0px var(--def-boxshow-color);
    background-color: var(--def-box-color);
    backdrop-filter: blur(var(--def-filler));
    border-radius: 4px;
    color: #fff;
}
.user-img{
    width: 50px;
    height: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
    border-radius: 2px;
    overflow: hidden;
}
.user-link{
    /* width: 100%; */
    height: 50px;
    /* background-color: #3a404a; */
    display:flex;
    justify-content: space-between;
    padding: 0 10px;
}
.wBox{
    display:flex;
    flex-direction: column;
}
.actP{
    border: 2px solid hotpink !important;
}

.seleBoxA{
    display:flex;
    flex-wrap:wrap;
    min-width: 70%;
    width: 640px;
    margin: 0 auto;
}
.seleBox{
    position: relative;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
    padding:7px 15px;
    background-color: var(--def-box-color);
    backdrop-filter: blur(var(--def-filler));
    margin:4px 5px;
    border: 2px solid transparent;
    border-radius: 2px;
}
.but{
    border-radius: 2px;
    border: none;
    padding: 3px 20px;
    font-family: myFont;
    margin-right: 10px;
    color: #fff;
    cursor: pointer;
    backdrop-filter: blur(var(--def-filler));
}
.but1{
    cursor: pointer;
    border-radius: 2px;
    border: none;
    padding: 10px 15px;
    font-family: myFont;
    margin: auto 3px;
    color: #fff;
    cursor: pointer;
    max-height: 35px;
    backdrop-filter: blur(var(--def-filler));
    /* margin-left: 15px; */
}
.but2{
    border-radius: 2px;
    border: none;
    padding: 10px 15px;
    font-family: myFont;
    margin: auto;
    color: #fff;
    cursor: pointer;
    max-height: 35px;
    backdrop-filter: blur(var(--def-filler));
}
.blueB{
    background-color: var(--def-button-color-blue);
}
.blueP{
    background-color: var(--def-button-color-pink);
}
.input{
    border-radius: 2px;
    background-color: var(--def-box-color);
    backdrop-filter: blur(var(--def-filler));
    color: #fff;
    font-family: myFont;
    font-size: 16px;
    padding: 10px 15px;
    outline: none;
    border: none;
    width: 70%;
    margin-right: 10px;
}
.inputs{
    border-radius: 2px;
    background-color: #3a404a;
    color: #fff;
    font-family: myFont;
    font-size: 16px;
    padding: 10px 15px;
    outline: none;
    border: none;
    width: 100%;
    margin-bottom: 10px;
    resize: none;
}
.downBox{
    width:100%;
    display: flex;
    justify-content: center;
}
.downVideoBox{
    text-align: center;
    color: #fff;
    font-size: 20px;
    height: 370px;
    overflow: auto;
}


/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
.downVideoBox::-webkit-scrollbar,.LiveList::-webkit-scrollbar  {
    width: 0px;
    height: 6px
}
/*定义滚动条轨道*/
.downVideoBox::-webkit-scrollbar-track,.LiveList::-webkit-scrollbar-track {
    background-color: transparent;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0
}
/*定义滑块 内阴影+圆角*/
.downVideoBox::-webkit-scrollbar-thumb,.LiveList::-webkit-scrollbar-thumb {
    background-color: #30B07F00;
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,0) 100%,transparent 100%,transparent 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 75%,transparent 75%,transparent);
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0
}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
.inputs::-webkit-scrollbar,.LiveList::-webkit-scrollbar  {
    width: 6px;
    height: 6px;
    /* background-color:pink; */
}
/*定义滚动条轨道*/
.inputs::-webkit-scrollbar-track,.LiveList::-webkit-scrollbar-track {
    background-color: transparent;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0
}
/*定义滑块 内阴影+圆角*/
.inputs::-webkit-scrollbar-thumb,.LiveList::-webkit-scrollbar-thumb {
    background-color: #30B07F00;
    background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,0) 100%,transparent 100%,transparent 50%,rgba(255,255,255,0) 50%,rgba(255,255,255,0) 75%,transparent 75%,transparent);
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    background-color:rgb(52, 116, 255);
}


:depp(.ivu-select,.ivu-select-single,.ivu-select-default){
    overflow: hidden;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}
:deep(.ivu-select-item:hover){
    background-color: #fff;
    color: #000;
}
:deep(.ivu-select-item){
    padding: 0 10px;
    background-color: var(--def-box-color);
    backdrop-filter: blur(var(--def-filler));
}
:deep(.ivu-select-selection){
    padding-left: 10px;
    max-height: 30px;
}
:deep(.ivu-select-dropdown-list){
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    position: relative;
    z-index: 50;
}
:deep(.ivu-select-dropdown){
    background-color: var(--def-box-color);
    /* backdrop-filter: blur(var(--def-filler)); */
    margin: 0;
    overflow: hidden;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
}
input::-webkit-input-placeholder {
    /* placeholder颜色  */
    color: var(--def-placeholder);
}
</style>